<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

    <ui:define name="head">
        <style type="text/css">
            
        </style>

        <script type="text/javascript">
            //<![CDATA[

            //]]>
        </script>
    </ui:define>

	<ui:define name="content">
	
		<h1 class="title ui-widget-header ui-corner-all">Client Side Validation - Events</h1>
		<div class="entry">
			<p>Validations can be triggered instantly without waiting for a button/link click using p:clientValidator.</p>

			<h:form>
                <p:panel header="Validate">
                    <h:panelGrid columns="4" cellpadding="5">
                        <h:outputLabel for="text" value="Text: (Change)" />
                        <p:inputText id="text" value="#{validationBean.text}" required="true">
                            <f:validateLength minimum="2" maximum="5" />
                            <p:clientValidator />
                        </p:inputText>
                        <p:message for="text" display="icon" />
                        <h:outputText value="#{validationBean.text}" />
                        
                        <h:outputLabel for="integer" value="Integer: (Keyup)" />
                        <p:inputText id="integer" value="#{validationBean.integer}">
                            <p:clientValidator event="keyup"/>
                        </p:inputText>
                        <p:message for="integer" display="icon" />
                        <h:outputText value="#{validationBean.integer}" />
                    </h:panelGrid>

                    <p:commandButton value="Save" ajax="false" icon="ui-icon-check" validateClient="true" />
                </p:panel>
			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="csvEvent.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;
    &lt;p:panel header="Validate"&gt;
        &lt;h:panelGrid columns="4" cellpadding="5"&gt;
            &lt;h:outputLabel for="text" value="Text: (Change)" /&gt;
            &lt;p:inputText id="text" value="\#{validationBean.text}" required="true"&gt;
                &lt;f:validateLength minimum="2" maximum="5" /&gt;
                &lt;p:clientValidator /&gt;
            &lt;/p:inputText&gt;
            &lt;p:message for="text" display="icon" /&gt;
            &lt;h:outputText value="\#{validationBean.text}" /&gt;

            &lt;h:outputLabel for="integer" value="Integer: (Keyup)" /&gt;
            &lt;p:inputText id="integer" value="\#{validationBean.integer}"&gt;
                &lt;p:clientValidator event="keyup"/&gt;
            &lt;/p:inputText&gt;
            &lt;p:message for="integer" display="icon" /&gt;
            &lt;h:outputText value="\#{validationBean.integer}" /&gt;
        &lt;/h:panelGrid&gt;

        &lt;p:commandButton value="Save" ajax="false" icon="ui-icon-check" validateClient="true"/&gt;
    &lt;/p:panel&gt;
&lt;/h:form&gt;
                    </pre>
				</p:tab>
				
				<p:tab title="ValidationBean.java">
<pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.Date;

public class ValidationBean {
    
    private String text;

    private Integer integer;
    
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }

    public Integer getInteger() {
        return integer;
    }
    public void setInteger(Integer integer) {
        this.integer = integer;
    }
}
</pre>
				</p:tab>
			</p:tabView>
			
		</div>
				
	</ui:define>
</ui:composition>